<template>
  <el-card style="margin-top: 0px">
    <div class="did-h">
      <el-input v-model="searchInput" placeholder="请输入权限名" size="small" class="small-input"></el-input>
      <el-button size="medium" type="primary" @click="handleSearch">查询</el-button>
      <el-button size="medium" type="primary" @click="showAddRoleDialog">新建权限</el-button>
    </div>
    <div style="margin-top: 1%;">
      <el-table :data="filteredData" class="full-width-table">
        <el-table-column fixed prop="id" label="权限ID" width="200" align="center" sortable></el-table-column>
        <el-table-column prop="name" label="权限名" width="100" align="center"></el-table-column>
        <el-table-column prop="description" label="权限描述" width="300" align="center"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" width="200" align="center"></el-table-column>
        <!-- <el-table-column prop="operation" label="权限操作" width="100"></el-table-column>                    //找不到 -->
        <el-table-column prop="operation" label="权限操作" width="0" align="center"></el-table-column>
        <el-table-column prop="object" label="对象" width="220" align="center"></el-table-column>
        <el-table-column label="权限更改" width="350" align="center">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="text" size="small">修改权限</el-button>
            <el-button @click="handleDeleteConfirm(scope.row)" type="text" size="small">删除权限</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
        :current-page.sync="pageNum" @current-change="sizeChange" @size-change="currentPage"
        style="width: 50%; margin: auto; margin-top: 50px !important; display: flex; align-items: center; justify-content: center">
      </el-pagination>
    </div>
    <el-dialog title="新建权限" :visible.sync="dialogVisible">
      <el-form ref="newRoleForm" :model="newRole" label-width="100px">
        <el-form-item label="权限名" prop="name">
          <el-input v-model="newRole.name"></el-input>
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="newRole.description"></el-input>
        </el-form-item>
        <!-- <el-form-item label="权限操作" prop="operation">
            <el-input v-model="newRole.operation"></el-input> -->
        <!-- </el-form-item> -->
        <el-form-item label="操作" prop="operate">
          <el-input v-model="newRole.operation"></el-input>
        </el-form-item>
        <el-form-item label="对象" prop="object">
          <el-input v-model="newRole.object"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitNewRoleForm">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改权限" :visible.sync="editRoleDialogVisible">
      <el-form :model="editRoleForm" label-width="100px">
        <el-form-item label="旧权限名" prop="name">
          <el-input v-model="editRoleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="新权限名" prop="name">
          <el-input v-model="editRoleForm.newName"></el-input>
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="editRoleForm.description"></el-input>
        </el-form-item>
        <!-- <el-form-item label="权限操作" prop="operation">
            <el-input v-model="editRoleForm.operation"></el-input>
          </el-form-item> -->
        <el-form-item label="操作" prop="operate">
          <el-input v-model="editRoleForm.operation"></el-input>
        </el-form-item>
        <el-form-item label="对象" prop="object">
          <el-input v-model="editRoleForm.object"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editRoleDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveRole">保存</el-button>
      </span>
    </el-dialog>
    <el-dialog title="删除权限" :visible.sync="deleteRoleDialogVisible">
      <p>确定删除该权限吗？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteRoleDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="deleteRole">确定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        searchInput: '',
        total: 100,
        pageSize: 20,
        tableData: [],
        dialogVisible: false,
        editRoleDialogVisible: false,
        deleteRoleDialogVisible: false,
        newRole: {
          name: '',
          description: '',
          operation: '',
          object: '',
        },
        editRoleForm: {
          name: '',
          description: '',
          operation: '',
          object: '',
        },
        deleteRoleId: '',
      };
    },
    mounted() {
      // 初始化数据
      this.showRightsData(1, 1, 1);
    },
    methods: {
      showAddRoleDialog() {
        this.dialogVisible = true;
      },
      submitNewRoleForm() {
        this.$refs.newRoleForm.validate((valid) => {
          if (valid) {
            // Send data to the backend
            axios
              .post(this.$api.userIdentity.submitNewRoleForm, this.newRole) //新建权限
              .then((response) => {
                this.tableData.push(response.data);
                this.dialogVisible = false;
                this.$message.success('新建权限成功');
              })
              .catch((error) => {
                this.$message.error('新建权限失败');
              });
            this.showRightsData(1, 1, 1);
          }
        });
      },
      handleSizeChange(newSize) {
        this.pageSize = newSize;
      },
      handleCurrentChange(newPage) {
        this.currentPage = newPage;
      },
      handleEdit(row) {
        this.editRoleForm = {
          ...row
        };
        this.editRoleDialogVisible = true;
      },
      handleDeleteConfirm(row) {
        this.deleteRoleId = row.id;
        this.deleteRoleDialogVisible = true;
      },
      sizeChange(e) {
        this.showRightsData(1, 1, 1);
      },
      deleteRole() {
        const roleToDelete = this.tableData.find((item) => item.id === this.deleteRoleId);

        axios
          .post(this.$api.userIdentity.deleteRole, roleToDelete) //删除权限
          .then((response) => {
            const index = this.tableData.findIndex((item) => item.id === this.deleteRoleId);
            if (index !== -1) {
              this.tableData.splice(index, 1);
            }
            this.deleteRoleDialogVisible = false;
            this.$message.success('权限删除成功');
          })
          .catch((error) => {
            this.$message.error('权限删除失败');
          });
      },
      async showRightsData() {
        let formData = new FormData();
        formData.append('pageNum', this.pageNum);
        formData.append('pageSize', this.pageSize);
        try {
          let res = await this.$http.post(this.$api.userIdentity.showRightsData, formData);
          if (res.status === 200) {
            this.tableData = res.data.records; // 请求成功后将res.data赋值给tableData
            this.total = res.data.total;
            console.log(res.data);
          }
        } catch (error) {
          console.error(error);
        }
      },
      saveRole() {
        axios
          .post(this.$api.userIdentity.saveRole, this.editRoleForm) //修改权限
          .then((response) => {
            // 在成功响应后进行一些操作，如果有需要的话
            this.editRoleDialogVisible = false;
            this.$message.success('权限修改成功');
            this.showRightsData(1, 1, 1);
          })
          .catch((error) => {
            // 处理错误情况，如果有需要的话
            this.$message.error('权限修改失败');
          });
      },
    },
    handleSearch() {
      const searchTerm = this.searchInput.trim();
      if (searchTerm !== '') {
        this.filteredData = this.tableData.filter((item) => item.name.includes(searchTerm));
      } else {
        this.filteredData = this.tableData;
      }
    },
    computed: {
      filteredData() {
        const searchTerm = this.searchInput.trim();
        if (searchTerm !== '') {
          return this.tableData.filter((item) => item.name.includes(searchTerm));
        } else {
          return this.tableData;
        }
      },
    },
  };
</script>

<style lang="less" scoped>
  .did-h {
    .black {
      &.black-h {
        height: 80%;
      }
    }

    .el-row {
      &.mt3 {
        margin-top: 3rem;
      }
    }

    .small-input {
      width: 180px;
    }
  }
</style>